<template>
	<div id="withdrawalList">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>提现列表</p>
		</div>
		<ul class="stream_type">
			<li @click="status = ''">
				<p :class="status==''?'stream_type_active':''">全部</p>
			</li>
			<li @click="status = 1">
				<p :class="status==1?'stream_type_active':''">提现成功</p>
			</li>
			<li @click="status = -1">
				<p :class="status==-1?'stream_type_active':''">提现失败</p>
			</li>
		</ul>
		<div v-for="item in streamList" class="stream_item" @click="seeDetail(item)">
			<div class="item_left">
				<p>提现{{item.money}}元</p>
				<p>{{getDate(item.createtime)}}</p>
			</div>
			<div class="item_right">
				<p class="money_reduce">-{{item.money}}</p>
				<p v-if="item.status == 1" class="success">提现成功</p>
				<p v-else-if="item.status == 0" class="review">审核中</p>
				<p v-if="item.status == -1" class="error">提现失败</p>
			</div>
		</div>
		<!---------详情弹窗------------>
		<div v-show="detail" id="feedback_detail" @click="detail = false">
			<div class="feedback_detail">
				<div class="detail_1">
					<p class="detail_title">提现{{stream.money}}元</p>
					<p class="detail_time">{{getDate(stream.createtime)}}</p>
					<span @click="detail = false">X</span>
				</div>
				<div v-if="stream.status == 0" class="detail_2">
					<p>提现{{stream.money}}元至 {{stream.bankname}}({{encryptionCard(stream.bankNum)}}),官方审核中</p>
				</div>
				<div v-else-if="stream.status == 1" class="detail_2">
					<p>提现{{stream.money}}元至 {{stream.bankname}}({{encryptionCard(stream.bankNum)}}),扣除手续费{{stream.money-stream.realMoney}}元,实际到账{{stream.realMoney}}元</p>
				</div>
				<div v-else-if="stream.status == -1" class="detail_2">
					<p>{{stream.reason}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'withdrawalList',
	data:function(){
		return{
			status: '',//提现状态
			streamList:[
//				{
//					type: 2,//流水类型
//					remark: '提现',//流水标题
//					createtime: 1514779200000,//流水时间
//					money: 50,//流水金额
//				},
			],
			stream:{}, // 详情
			detail: false, // 控制详情弹窗显示隐藏
		}
	},
	methods:{
		// ----- 获取余额流水 -----
		getBalanceFlow: function(){
			var _this = this;
			var type;
			if(_this.streamType == 1){
				type = null;
			}else if(_this.streamType == 2){
				type = 1;
			}else if(_this.streamType == 3){
				type = 2;
			}
			let postData = _this.$qs.stringify({
				status: _this.status
			});
			_this.$axios.post("/user/withdrawals/getMyWithdrawals", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.streamList = data.result;
				}else{
					_this.$alert(data.result);
				}
			}).catch(function (error) {
				console.log(error);
			});
		},
		//----------银行卡号12之后的数字----------
		encryptionCard:function(str){
			if(str == undefined){
				return;
			}
			var str1 = str.split('');
			var str2 = '';
			$.each(str1,function(i){
				if(i>=12){
					str2 += str1[i];
				}
			})
			return str2;
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
		seeDetail: function(item){
			this.stream = item;
			this.detail = true;
		}
	},
	watch: {
		status(){
			this.getBalanceFlow();
		}
	},
	created: function(){
		this.getBalanceFlow();
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#withdrawalList{
	padding-top: 7rem;
	box-sizing: border-box;
	background-color: #fff;
}
.stream_type{
	display: flex;
	border-bottom: 1px solid #EEEEEE;
	background-color: #fff;
	position: fixed;
	top: 4rem;
	left: 0;
	width: 100%;
}
.stream_type li{
	width: 34%;
	height: 3rem;
	border-right: 1px solid #EEEEEE;
	display: flex;
	justify-content: center;
}
.stream_type li p{
	height: 100%;
	border-bottom: 2px solid transparent;
	display: flex;
	align-items: center;
	color: #4F4F4F;
	font-size: 1.2rem;
	padding: 0 0.5rem;
	box-sizing: border-box;
}
.stream_type li p.stream_type_active{
	border-bottom: 2px solid #FF6565;
	color: #FF6565;
}

.stream_item{
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
}
.item_left{
	width: 70%;
}
.item_left p:first-child{
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #4F4F4F;
	font-size: 1.4rem;
	margin-bottom: 1rem;
}
.item_left p:last-child{
	font-size: 1.2rem;
	color: #A9A9A9;
}
.item_right p{
	text-align: right;
}
.item_right .money_add{
	color: #FF6565;
	font-size: 1.4rem;
}
.item_right .money_reduce{
	color: #A9A9A9;
	font-size: 1.4rem;
}
.item_right .success{
	color: #3FC34C;
	font-size: 1.2rem;
	margin-top: 1rem;
}
.item_right .review{
	color: #FFC342;
	font-size: 1.2rem;
	margin-top: 1rem;
}
.item_right .error{
	color: #FF5656;
	font-size: 1.2rem;
	margin-top: 1rem;
}
#feedback_detail{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11;
}
.feedback_detail{
	width: 90%;
	background-color: #fff;
	border-radius: 5px;
}
.detail_1{
	padding: 0.5rem 0;
	position: relative;
	border-bottom: 1px solid #EEEEEE;
}
.detail_1 .detail_title{
	color: #4F4F4F;
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0.5rem;
}
.detail_1 .detail_time{
	color: #A9A9A9;
	font-size: 1rem;
	text-align: center;
}
.detail_1 span{
	color: #3BA5EA;
	font-size: 1.4rem;
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
}
.detail_2{
	padding: 1rem;
	box-sizing: border-box;
	min-height: 10rem;
	font-size: 1.2rem;
	color: #787878;
	line-height: 1.5em;
	position: relative;
}
.detail_2 p{
	word-wrap: break-word;
}

</style>